<!--新增/编辑/查看-->
<template>
  <el-dialog
    v-toggle-full
    v-loading.lock="formLoading"
    class="base-dialog"
    :custom-class="'panna-dialog_big'"
    :append-to-body="true"
    :title="title"
    align="center"
    :close-on-click-modal="false"
    :visible.sync="tempdialogFormVisible"
    @closed="closedDialog"
  >
    <p slot="title">{{ title }}</p>
    <div class="main-container">
      <el-collapse v-model="activeName">
        <el-collapse-item title="基础信息" name="1">
          <template>
            <div>
              <el-form
                ref="formData1"
                label-width="120px"
                :model="formData1"
                :rules="formRules"
                status-icon
                class="base-pipeline-layout system-customer-form"
              >
                <el-form-item
                  label="物料名称"
                  :label-width="formLabelWidth1"
                  prop="name"
                >
                  <el-input
                    v-model="formData1.name"
                    :disabled="readOnly"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="物料别名"
                  :label-width="formLabelWidth"
                  prop="aliasName"
                >
                  <el-input
                    v-model="formData1.aliasName"
                    placeholder="请输入"
                    :disabled="readOnly"
                  />
                </el-form-item>
                <el-form-item
                  label="分类"
                  :label-width="formLabelWidth1"
                  prop="type"
                >
                  <el-select
                    v-if="editId"
                    v-model="formData1.type"
                    placeholder="请选择"
                    :disabled="true"
                  >
                    <el-option
                      v-for="item in type"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-else
                    v-model="formData1.type"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in type"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="型号规格"
                  :label-width="formLabelWidth"
                  prop="size"
                >
                  <el-input
                    v-model="formData1.size"
                    placeholder="请输入"
                    :disabled="readOnly"
                  />
                </el-form-item>
                <el-form-item
                  label="包装单位"
                  :label-width="formLabelWidth1"
                  prop="packingUnit"
                >
                  <el-input
                    v-if="editId"
                    v-model="formData1.packingUnit"
                    placeholder="请输入包装单位，如：瓶、袋、箱、克"
                    :disabled="true"
                  />
                  <el-input
                    v-else
                    v-model="formData1.packingUnit"
                    placeholder="请输入包装单位，如：瓶、袋、箱、克"
                  />
                </el-form-item>
                <el-form-item
                  label="存储条件"
                  :label-width="formLabelWidth"
                  prop="storeCondition"
                >
                  <el-select
                    v-model="formData1.storeCondition"
                    placeholder="请选择"
                    :disabled="readOnly"
                  >
                    <el-option
                      v-for="item in storeCondition"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="来源"
                  :label-width="formLabelWidth1"
                  prop="source"
                >
                  <el-input
                    v-model="formData1.source"
                    placeholder="请输入"
                    :disabled="readOnly"
                  />
                </el-form-item>
                <el-form-item
                  label="标准值"
                  :label-width="formLabelWidth"
                  prop="standardValue"
                >
                  <el-input
                    v-model="formData1.standardValue"
                    placeholder="请输入"
                    :disabled="readOnly"
                  />
                </el-form-item>
                <el-form-item
                  label="用途"
                  :label-width="formLabelWidth1"
                  prop="used"
                >
                  <el-input
                    v-model="formData1.used"
                    placeholder="请输入"
                    :disabled="readOnly"
                  />
                </el-form-item>
                <el-form-item
                  label="不确定度/标准偏差"
                  :label-width="formLabelWidth"
                  prop="deviation"
                >
                  <el-input
                    v-model="formData1.deviation"
                    placeholder="请输入"
                    :disabled="readOnly"
                  />
                </el-form-item>
                <el-form-item
                  label="有效期"
                  :label-width="formLabelWidth1"
                  prop="validityDate"
                >
                  <el-input
                    v-model="formData1.validityDate"
                    placeholder="请输入"
                    style="width: 70%; float: left"
                    :disabled="readOnly"
                    @input="validDate(formData1.validityDate)"
                  />
                  <el-select
                    v-model="formData1.validityType"
                    placeholder="请选择"
                    style="width: 30%; float: left"
                    :disabled="readOnly"
                  >
                    <el-option
                      v-for="item in validityType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="净重(克)"
                  :label-width="formLabelWidth"
                  prop="suttle"
                >
                  <el-input
                    v-model="formData1.suttle"
                    placeholder="请输入"
                    :disabled="readOnly"
                  />
                </el-form-item>
                <br />
                <el-form-item
                  label="备注"
                  :label-width="formLabelWidth1"
                  prop="remark"
                >
                  <el-input
                    v-model="formData1.remark"
                    :disabled="readOnly"
                    type="textarea"
                    maxlength="200"
                    show-word-limit
                    :rows="2"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  v-if="editId"
                  label="条形码"
                  :label-width="formLabelWidth1"
                >
                  <template>
                    <JsBarcode
                      :value="formData1.number"
                      :valid="true"
                    ></JsBarcode>
                  </template>
                </el-form-item>
                <el-form-item label="二维码" :label-width="formLabelWidth1">
                  <template>
                    <GenerateQRCode :value="formData1.number"></GenerateQRCode>
                  </template>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="图片" name="2">
          <template>
            <el-form
              ref="formData2"
              v-loading="formLoading"
              :disabled="readOnly"
              :rules="formRules"
              :model="formData1"
              class="base-pipeline-layout system-customer-form"
            >
              <el-form-item prop="pictureFile" class="avatar">
                <BaseUpload
                  v-if="refeshBaseUpload"
                  key="BaseUpload"
                  ref="BaseUpload"
                  v-model="formData1.pictureFile"
                  :file-size="5120"
                  :disabled="readOnly"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-collapse-item>
        <el-collapse-item title="附件" name="3">
          <template>
            <el-form
              ref="formData3"
              v-loading="formLoading"
              :rules="formRules"
              :model="formData1"
              class="base-pipeline-layout system-customer-form file"
            >
              <el-form-item prop="attachments" class="avatar">
                <BaseUploadFile
                  v-if="refeshBaseUpload"
                  key="BaseUploadAttachments"
                  ref="BaseUploadAttachments"
                  v-model="formData1.attachments"
                  :file-size="10240"
                  :disabled="readOnly"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
    <span v-if="!readOnly" slot="footer" class="base-dialog-footer">
      <el-button v-if="!readOnly" type="primary" @click="onSubmit('formData1')"
        >保 存</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import BaseUpload from "../../../components/BaseUpload/singleImg.vue";
import BaseUploadFile from "../../../components/BaseUploadFile/index.vue";
import {
  create,
  update,
  get,
  getTreeData,
} from "../../../api/Material/Material.js";
import { GetConfigByKey } from "../../../api/System/SystemDict.js";
import JsBarcode from "../../../components/JsBarcode.vue";
import GenerateQRCode from "../../../components/GenerateQRCode.vue";
import _ from "lodash";

export default {
  name: "MaterialEdit",
  components: { BaseUpload, BaseUploadFile, JsBarcode, GenerateQRCode },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      refeshBaseUpload: true,
      title: "",
      loading: false,
      formLoading: false,
      OnEdit: false,
      tempdialogFormVisible: this.dialogFormVisible,
      activeName: ["1", "2", "3"],
      formLabelWidth: "130px",
      formLabelWidth1: "100px",
      storeCondition: [],
      validityType: [],
      type: [],
      formData1: {
        id: 0,
        number: "",
        name: "",
        aliasName: "",
        type: null,
        size: "",
        packingUnit: "",
        storeCondition: "常温",
        source: "",
        standardValue: "",
        used: "",
        deviation: "",
        validityDate: "",
        validityType: "年",
        suttle: "",
        remark: "",
        picture: "",
        pictureFile: undefined,
        barCode: "",
        fileList: [],
        attachments: [],
      },
      formRules: {
        name: [{ required: true, message: "请输入物料名称" }],
        type: [{ required: true, message: "请选择物料分类" }],
        size: [{ required: true, message: "请输入型号规格" }],
        packingUnit: [{ required: true, message: "请输入包装单位" }],
      },
    };
  },
  created() {
    // 存储条件
    GetConfigByKey({ configKey: "StoreConditionCode" }).then((res) => {
      if (
        res.data != null &&
        res.data.length > 0 &&
        res.data[0].value != null
      ) {
        this.storeCondition = JSON.parse(res.data[0].value);
      }
    });
    // 物料有效期类型
    GetConfigByKey({ configKey: "ValidityTypeCode" }).then((res) => {
      if (
        res.data != null &&
        res.data.length > 0 &&
        res.data[0].value != null
      ) {
        this.validityType = JSON.parse(res.data[0].value);
      }
    });
    if (this.readOnly && this.editId) {
      this.OnEdit = true;
    }
  },
  mounted() {
    this.getTreeDataFun();
    this.init();
  },
  methods: {
    getTreeDataFun() {
      var obj = {};
      obj.appId = 4000;
      getTreeData(obj).then((res) => {
        this.type = res.data[0].children;
      });
    },
    // 初始化
    async init() {
      this.title = this.readOnly
        ? "查看物料"
        : this.editId
          ? "编辑物料"
          : "新增物料";
      if (this.editId) {
        get({ id: this.editId })
          .then((res) => {
            this.formData1 = res.data;
            if (res.data.picture != null) {
              this.$set(this.formData1, "pictureFile", res.data.picture);
            }
            if (res.data.fileList != null && res.data.fileList.length > 0) {
              var that = this;
              that.formData1.attachments = [];
              res.data.fileList.forEach(function(item, index) {
                var file = {
                  newName: item.storageFileName,
                  name: item.originalFileName,
                  url: item.filePath,
                };
                that.formData1.attachments.push(file);
              });
            }
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.loading = false;
      }
    },
    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    // 限制有效期只能输入正整数
    validDate(val) {
      this.formData1.validityDate = val.replace(/[^1-9]/g, "");
    },
    onSubmit: _.throttle(function() {
      var _this = this;
      this.$refs.formData1.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (_this.formData1.pictureFile != null) {
            _this.formData1.picture = _this.formData1.pictureFile;
          }
          _this.formData1.fileList = [];
          if (
            _this.formData1.attachments != null &&
            _this.formData1.attachments.length > 0
          ) {
            _this.formData1.attachments.forEach(function(item) {
              var file = {
                originalFileName: item.name,
                storageFileName: item.newName,
                filePath: item.url,
              };
              _this.formData1.fileList.push(file);
            });
          }
          var requestData = JSON.parse(JSON.stringify(_this.formData1));
          _this.formLoading = true;
          if (_this.formData1.id <= 0) {
            create(requestData)
              .then((res) => {
                if (res.code === 200) {
                  _this.SuccessfulOperation();
                }
                _this.formLoading = false;
                _this.loading = false;
              })
              .catch(() => {
                _this.loading = false;
                _this.formLoading = false;
              });
          } else {
            update(requestData)
              .then((res) => {
                if (res.code === 200) {
                  _this.SuccessfulOperation();
                }
                _this.loading = false;
                _this.formLoading = false;
              })
              .catch(() => {
                _this.loading = false;
                _this.formLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    }, 5000),
    // 操作成功回调用
    SuccessfulOperation() {
      this.loading = false;
      this.$emit("success");
      this.closedDialog();
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$emit("update:dialogFormVisible", false);
      this.$refs.formData1.resetFields();
      this.$emit("input", false);
    },
  },
};
</script>
<style>
.el-collapse-item__header {
  height: 38px;
  line-height: 20px;
  padding: 4px;
  background-color: #f1f8ff;
}

.el-collapse-item__content {
  padding-top: 25px;
  padding-bottom: 12.5px;
}
</style>

<style lang="scss" scoped>
.system-customer-form {
  &.file {
    .el-form-item {
      width: 100% !important;
    }

    ::v-deep .el-form-item__content {
      overflow-y: auto;
    }
  }

  // padding-bottom: 24px;
  .relay-only-value {
    margin-bottom: 2px;
  }

  .el-row .el-form-item {
    width: 100%;
  }

  .default-form-item {
    display: block;
    height: 84px;
  }
}
</style>
